<!--驳回统计池-->
<template>
  <div class="customer-list">
    <el-form :inline="true" :model="ruleForm" ref="ruleForm">
      <el-form-item label="城市：">
        <el-select @change="cityChange" filterable v-model="ruleForm.cityId" placeholder="请选择">
          <el-option
            v-for="item in citys"
            :key="item.cityId"
            :label="item.city"
            :value="item.cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼盘名称：">
        <el-select filterable v-model="ruleForm.devId" placeholder="请选择">
          <el-option
            v-for="(item,index) in devList"
            :key="index"
            :label="item.devName"
            :value="item.devId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提交人所属大区">
        <el-select @change="regionChange" filterable v-model="ruleForm.regionId" placeholder="请选择">
          <el-option
            v-for="item in regionList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提交人所属城市">
        <el-select v-if="ruleForm.regionId != 6" filterable v-model="ruleForm.personCityId" placeholder="请选择">
          <el-option
            v-for="item in cityList"
            :key="item.id"
            :label="item.city"
            :value="item.cityId"
          ></el-option>
        </el-select>
        <el-select v-else filterable v-model="ruleForm.personCityId" placeholder="请选择">
          <el-option
            v-for="item in cityList"
            :key="item.provinceid"
            :label="item.province"
            :value="item.provinceid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提交人姓名：">
        <el-input v-model="ruleForm.intentionInitiatorName" placeholder="请输入姓名/手机号"></el-input>
      </el-form-item>
      <el-form-item label="操作后台：">
        <el-select v-model="ruleForm.rejectSystemFlag" placeholder="请选择">
          <el-option label="运营后台" :value="1"></el-option>
          <el-option label="开发商后台" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="驳回节点：">
        <el-select filterable v-model="ruleForm.followType" placeholder="请选择">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="驳回原因：">
        <el-select
          @change="rejectChange"
          filterable
          v-model="rejectId"
          placeholder="请选择"
        >
          <el-option v-for="item in rejects" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="isSelect" label>
        <el-select filterable v-model="ruleForm.remark" placeholder="请选择">
          <el-option
            v-for="item in rejectText"
            :key="item.id"
            :label="item.content"
            :value="item.content"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作人：">
        <el-input v-model="ruleForm.submitPerson" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="onClear">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
      <el-table-column
        align="center"
        v-for="(col,indexs) in colConfigs"
        v-bind=col
        :key="indexs"
      ></el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:15px;"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="ruleForm.pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="ruleForm.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import api from "../../api/apiPath.js";
import utils from "../../common/utils";
export default {
  name: "rejectStatistics",
  data() {
    return {
      devList: [],
      cityList: [],
      citys: [],
      regionList: [],
      statusList: [
        {
          value: 3,
          label: "认购"
        },
        {
          value: 4,
          label: "签约"
        },
        {
          value: 9,
          label: "草签"
        },
        {
          value: 10,
          label: "自定义"
        },
        {
          value: 8,
          label: "退认购"
        },
        {
          value: 13,
          label: "退房"
        }
      ],
      rejects: [],
      rejectText: [],
      colConfigs: [
        { prop: "customerName", label: "客户姓名" },
        { prop: "customerPhone", label: "客户手机号" },
        { prop: "devName", label: "楼盘名称" },
        { prop: "cellName", label: "房间号" },
        { prop: "followName", label: "驳回节点" },
        { prop: "intentionInitiatorName", label: "跟进提交人" },
        { prop: "cityName", label: "所属城市" },
        { prop: "regionName", label: "所属大区" },
        { prop: "rejectReason", label: "驳回原因分类" },
        { prop: "remark", label: "内容" },
        { label:'操作后台',formatter: this.rejectSystemFlag},
        { prop: "submitPersonName", label: "操作人" },
        { prop: "createTime", label: "操作时间" }
      ],
      ruleForm: {
        cityId: "",
        devId: undefined,
        regionId: undefined,
        personCityId: undefined,
        rejectSystemFlag: '',
        intentionInitiatorName: "",
        beginDate: "",
        endDate: "",
        remark: '',
        rejectReason: "",
        followType: undefined,
        submitPerson: undefined,
        pageSize: 10,
        pageNum: 1
      },
      rejectId: '',
      isSelect: true,
      tableData: [],
      total: 0
    };
  },
  methods: {
    city() {
      // 获取区域
      this.$axios.get(api.CITYREGIONALL).then(res => {
        this.regionList = res;
      })
      this.axios.post(api.CITYLIST).then(res => {
        this.citys = res.data.data.cityList;
      });
    },
    // 城市查楼盘
    cityChange(val) {
      this.ruleForm.devId = undefined;
      this.axios.post(api.ruleGetDevList, { cityId: val }).then(res => {
        this.devList = res.data.data;
      });
    },
    // 大区查城市
    regionChange(val) {
      this.ruleForm.personCityId = undefined;
      this.axios.post(api.xkgetCityByRegion, { regionId: val }).then(res => {
        this.cityList = res.data.data;
      });
    },
    Reject() {
      this.axios.get(api.rejectReasonType).then(res => {
        if (res.data.code === 200) {
          this.rejects = res.data.data;
          this.rejects.push({ key: -1, value: "手填其他理由" },{key:-2,value:'客户退房'},{key:-3,value:'开发商端批量拒绝'});
        }
      });
    },
    rejectChange(val) {
      this.ruleForm.remark = "";
      if (val == -1 || val == -2 || val == -3) {
        this.isSelect = false;
        return false;
      } else {
        this.isSelect = true;
      }
      this.axios.post(api.rejectText, { id: val }).then(res => {
        if (res.data.code === 200) {
          this.rejectText = res.data.data.list;
        }
      });
    },
    onSearch() {
      this.ruleForm.pageNum = 1;
      console.log(this.rejectId)
      if (this.rejectId) {
        let obj = this.rejects.find(res => {
          return res.key === this.rejectId;
        });
        console.log(obj)
        this.ruleForm.rejectReason = obj.value;
      }
      this.list();
    },
    onClear() {
      this.isSelect = true;
      this.rejectId = '';
      this.devList = [];
      this.cityList = [];
      this.ruleForm = {
        cityId: "",
        devId: undefined,
        regionId: undefined,
        personCityId: undefined,
        intentionInitiatorName: "",
        beginDate: "",
        endDate: "",
        rejectReason: "",
        followType: undefined,
        submitPerson: undefined,
        pageSize: 10,
        pageNum: 1
      };
      this.list();
    },
    list() {
      this.axios.post(api.rejectionList, this.ruleForm).then(res => {
        if (res.data.code === 200) {
          for (let item of res.data.data.list) {
            item.customerPhone = utils.formatPhoneNumber(item.customerPhone);
          }
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        }
      });
    },
    handleSizeChange(val) {
      this.ruleForm.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.ruleForm.pageNum = val;
      this.list();
    },
    rejectSystemFlag(row) {
      if(row.rejectSystemFlag == 1) {
        return '运营后台'
      }else {
        return '开发商后台'
      }
    }
  },
  created() {
    this.list();
    this.city();
    this.Reject();
  }
};
</script>